<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅读器</title>
    <style id="theme-style">
        body {
            font-family: Arial, sans-serif;
            transition: background-color 0.5s, color 0.5s;
            display: flex;
            flex-direction: column;
            height: 100vh;
            margin: 0 60px; /* 左右边距为20像素 */
        }

        .dark-mode {
            background-color: #222;
            color: #fff;
        }

        header {
            padding: 1rem;
            text-align: center;
        }

        #editor {
            flex: 1;
            padding: 1rem;
            overflow: auto;
            margin: 20px; /* 左右边距为20像素 */
        }
    </style>
</head>
<body>

<header>
    <h1>阅读器</h1>
    <p>这是一个简单的阅读器示例，可以切换亮色和暗色主题。</p>
    <button onclick="toggleTheme()">切换主题</button>
</header>

<div id="editor" contenteditable="true">
    <p>在这里添加您的可编辑文本...</p>
</div>

<script>
    function toggleTheme() {
        const body = document.body;
        body.classList.toggle('dark-mode');

        // 保存主题状态，以便在下次加载时恢复
        const isDarkMode = body.classList.contains('dark-mode');
        localStorage.setItem('dark-mode', isDarkMode);
    }

    // 检查本地存储中的主题状态
    const isDarkModeStored = localStorage.getItem('dark-mode');
    if (isDarkModeStored === 'true') {
        document.body.classList.add('dark-mode');
    }
</script>

</body>
</html>
